<template>
  <!--
        发表评论
          1：定义api
          2:导入
          3:点击发布调用api
          4:调用成功
               将发表的评论数据加到第一条
               输入框清空
               提示
     -->
  <div class="article-comment">
    <div class="content">
      <!-- van-list
               v-model
               finished
               finished-text
               @load
                   发请求
                   请求完成
                      改v-model的值为false
                      数据累加
                      下一页请求条件修改
                      判断是否加载完成，完成： finished=true

    -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="getData"
      >
        <div class="item" v-for="item in list" :key="item.com_id">
          <img class="avatar" :src="item.aut_photo" alt="" />
          <div class="middle">
            <div class="name">{{ item.aut_name }}</div>
            <div class="txt">
              {{ item.content }}
            </div>
            <div class="time">
              <span class="t">{{ item.pubdate | formatDate }}</span>
              <span class="recomment" @click="recommentEvent(item)"
                >回复({{ item.reply_count }})</span
              >
            </div>
          </div>
          <!--
    点赞与取消点赞
    当前已点赞再点就是取消点赞
    当前没点赞再点就是点赞

    1：定义接口api(点赞与取消点赞)
    2：导入接口api
    3:处理当前是否点赞的状态（包含css）
    4:加入点击事件调用相应接口
    5：调用完成
         提示
         修改点赞状态

 -->

          <van-icon
            @click="likingEvent(item)"
            :class="{ active: item.is_liking }"
            name="like-o"
          />
        </div>
      </van-list>
    </div>
    <div class="send">
      <!-- 组件  默认不支持原生事件  .native修饰符让它支持 -->
      <van-field v-model.trim="msg" @keyup.enter="submit">
        <template #button>
          <van-button type="info" size="small" @click="submit">发布</van-button>
        </template>
      </van-field>
    </div>
    <!-- 回复评论组件 -->
    <!-- 父传子
        <子组件标签 :属性名=父组件属性  />
        子组件内
          props:{
              type:类型,
              required:是否必传
              default
                  简单数据类型：直接写（Number,String,Boolean,null,undefined）
                  复杂数据类型:()=>复杂数据  (Object,Array,Function)
              validator:(value)=>{
                return boolean值
                    true:验证通过不报错
                    false:验证失败，报错
              }
          }
          子传父
            <子组件 @事件名=父组件事件 />
            子组件内
               this.$emit('事件名',实参值)

    -->

    <ArticleReComment
      v-if="bol"
      @setCount="setCount"
      ref="recomment"
      :item="commentItem"
      @reload="reload"
    ></ArticleReComment>
  </div>
</template>
<script>
import {
  comments,
  commentsPost,
  commentLikingsDelete,
  commentLikings
} from '@/api/article'
import ArticleReComment from './ArticleReComment.vue'
export default {
  components: {
    ArticleReComment
  },
  data () {
    return {
      bol: true,
      list: [],
      loading: false,
      finished: false,
      offset: null,
      msg: '',
      commentItem: {}
    }
  },
  created () {
    // this.getData()
  },
  methods: {
    async getData () {
      const res = await comments({
        type: 'a',
        source: this.$route.query.id,
        offset: this.offset,
        limit: 1
      })
      this.loading = false
      this.list.push(...res.data.results)
      this.offset = res.data.last_id
      if (res.data.last_id === res.data.end_id) {
        this.finished = true
      }

      console.log('评论列表数据', res)
    },
    // 发表评论
    async submit () {
      // 是否已输入内容
      if (this.msg === '') {
        return this.$toast.fail('请先输入内容！')
      }
      const res = await commentsPost({
        target: this.$route.query.id,
        content: this.msg
        // art_id: null
      })
      // 将评论数据添加到第一条
      this.list.unshift(res.data.new_obj)
      //   清空输入框
      this.msg = ''
      //   提示
      this.$toast.success('发表评论成功')
      console.log('评论后返回值', res.data.new_obj)
    },
    // 回复评论
    recommentEvent (item) {
      this.$refs.recomment.show = true
      this.commentItem = item
    },
    // 修改评论总条数
    setCount () {
      this.commentItem.reply_count++
    },
    // 还原回复组件
    reload () {
      this.bol = false
      this.$nextTick(() => {
        this.bol = true
      })
    },
    // 点赞与取消点赞
    // const arr=[{isLiking:false}]
    // const arr2=arr
    // const item=arr[0]   item.isLiking=true
    //
    async likingEvent (item) {
      if (item.is_liking) {
        // 取消点赞
        await commentLikingsDelete(item.com_id)
        // 提示
        this.$toast.success('取消点赞成功')
        // 修改点赞状态
        item.is_liking = false
      } else {
        await commentLikings(item.com_id)
        // 提示
        this.$toast.success('点赞成功')
        // 修改点赞状态
        item.is_liking = true
      }
    }
  }
}
</script>
<style lang="less" scoped>
.article-comment {
  .content {
    padding: 15px 15px 54px 15px;

    .item {
      display: flex;
      padding: 20px 0;
      border-bottom: 1px solid #f4f4f4;
      .avatar {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        object-fit: cover;
      }
      .middle {
        flex: 1;
        margin: 0 15px;
        .name {
          color: #6e82a8;
          line-height: 20px;
        }
        .txt {
          padding: 10px 0;
          word-break: break-all;
          line-break: anywhere;
        }
        .time {
          .t {
            color: #b49f96;
            margin-right: 10px;
          }
        }
      }
    }
  }
  .send {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100vw;
  }
  .active {
    color: red;
  }
}
</style>
